<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学习路线设计系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: #f7f9fc;
        margin: 0;
        padding: 0;
      }

      .container {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }

      .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding: 24px;
        transition: transform 0.3s;
      }

      .card:hover {
        transform: translateY(-4px);
      }

      .feature-card {
        border-left: 4px solid #2d5bff;
        transition: all 0.3s ease;
      }

      .feature-card:hover {
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        border-left-color: #00c48c;
      }

      .progress-bar {
        height: 8px;
        background: linear-gradient(90deg, #2d5bff, #00c48c);
        border-radius: 4px;
      }

      .ai-tag {
        display: inline-flex;
        align-items: center;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 12px;
        background: rgba(45, 91, 255, 0.1);
        color: #2d5bff;
      }

      .timeline-item {
        position: relative;
        padding-left: 30px;
        margin-bottom: 20px;
      }

      .timeline-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #2d5bff;
      }

      .timeline-item::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 17px;
        width: 2px;
        height: calc(100% + 10px);
        background: #e8e8e8;
      }

      .timeline-item:last-child::after {
        display: none;
      }

      .skill-tag {
        display: inline-block;
        padding: 4px 10px;
        background: #f0f5ff;
        border-radius: 16px;
        font-size: 12px;
        margin-right: 8px;
        margin-bottom: 8px;
      }

      .tab-button {
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .tab-button.active {
        background-color: #2d5bff;
        color: white;
      }

      .tab-content {
        display: none;
      }

      .tab-content.active {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- 顶部导航区 -->
      <header
        class="fixed-section bg-[#1A1F36] text-white h-20 flex items-center px-8"
      >
        <div class="flex items-center w-full">
          <div class="text-xl font-bold flex items-center">
            <span
              class="iconify mr-2"
              data-icon="carbon:ai-results-high"
              style="color: #2d5bff"
            ></span>
            九霄 Pro 2025
            <span class="text-sm bg-[#2D5BFF] rounded ml-3 px-2 py-1"
              >企业版 v3.5</span
            >
          </div>

          <nav class="flex space-x-8 mx-auto">
            <a href="#" class="nav-link font-medium text-gray-300">评估中心</a>
            <a href="#" class="nav-link font-medium text-gray-300"
              >候选人管理</a
            >
            <a href="#" class="nav-link font-medium text-gray-300">数据分析</a>
            <a href="#" class="nav-link font-medium text-gray-300">团队洞察</a>
            <a href="#" class="nav-link font-medium text-white">学习路径</a>
            <a href="#" class="nav-link font-medium text-gray-300">项目测试</a>
          </nav>

          <div class="flex items-center space-x-6">
            <button class="relative">
              <span class="iconify text-xl" data-icon="mdi:bell-outline"></span>
              <span
                class="absolute top-0 right-0 w-2 h-2 rounded-full bg-[#FF647C]"
              ></span>
            </button>
            <button
              class="iconify text-xl"
              data-icon="mdi:cog-outline"
            ></button>
            <button
              class="iconify text-xl"
              data-icon="mdi:help-circle-outline"
            ></button>
            <div class="flex items-center cursor-pointer">
              <div
                class="bg-gray-200 border-2 border-dashed rounded-xl w-10 h-10"
              ></div>
              <span class="iconify ml-2" data-icon="mdi:chevron-down"></span>
            </div>
          </div>
        </div>
      </header>

      <!-- 主要内容区 -->
      <div class="flex flex-1 pt-20">
        <!-- 侧边栏 -->
        <aside
          class="fixed-section w-[280px] bg-white border-r border-gray-200 p-6 flex flex-col"
        >
          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              学习路径管理
            </h3>
            <div class="space-y-3">
              <button
                class="w-full flex items-center text-left p-3 rounded-lg bg-[#2D5BFF]/5 text-[#2D5BFF]"
              >
                <span class="iconify mr-3" data-icon="mdi:road-variant"></span>
                路径设计
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span
                  class="iconify mr-3"
                  data-icon="mdi:progress-check"
                ></span>
                进度追踪
              </button>
              <button
                class="w-full flex items-center text-left p-3 rounded-lg hover:bg-gray-100"
              >
                <span
                  class="iconify mr-3"
                  data-icon="mdi:book-open-outline"
                ></span>
                资源管理
              </button>
            </div>
          </div>

          <div class="mb-10">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              路径模板
            </h3>
            <div class="space-y-3">
              <div
                class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-[#2D5BFF]"
              >
                <div class="font-medium">前端开发路径</div>
                <div class="text-sm text-[#8F95A3]">React, Vue, TypeScript</div>
              </div>
              <div
                class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-[#2D5BFF]"
              >
                <div class="font-medium">后端开发路径</div>
                <div class="text-sm text-[#8F95A3]">
                  Java, Spring Boot, MySQL
                </div>
              </div>
              <div
                class="p-3 rounded-lg border border-gray-200 cursor-pointer hover:border-[#2D5BFF]"
              >
                <div class="font-medium">数据科学路径</div>
                <div class="text-sm text-[#8F95A3]">Python, SQL, 机器学习</div>
              </div>
            </div>
          </div>

          <div class="flex-1">
            <h3 class="text-[16px] font-semibold text-[#1A1F36] mb-4">
              快捷操作
            </h3>
            <div class="space-y-3">
              <button
                class="w-full bg-[#2D5BFF] text-white h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span class="iconify mr-2" data-icon="mdi:plus"></span>
                新建路径
              </button>
              <button
                class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-11 rounded-lg flex items-center justify-center font-medium"
              >
                <span class="iconify mr-2" data-icon="mdi:content-copy"></span>
                复制模板
              </button>
            </div>
          </div>
        </aside>

        <!-- 主内容 -->
        <main class="flex-1 overflow-y-auto p-8">
          <div class="mb-6">
            <h1 class="text-[28px] font-bold text-[#1A1F36]">
              企业学习路线设计系统
            </h1>
            <p class="text-[#4A4F5F] mt-2">
              <span
                class="iconify align-middle text-[#00C48C]"
                data-icon="mdi:shield-check-outline"
              ></span>
              <span class="align-middle ml-1"
                >将企业技术栈、开发规范和业务需求转化为条理清晰的学习路径</span
              >
            </p>
          </div>

          <!-- 功能导航 -->
          <div class="flex space-x-4 mb-8">
            <div class="tab-button active" data-tab="tab1">路径设计</div>
            <div class="tab-button" data-tab="tab2">进度追踪</div>
            <div class="tab-button" data-tab="tab3">资源管理</div>
            <div class="tab-button" data-tab="tab4">企业规范</div>
          </div>

          <!-- 路径设计模块 -->
          <div id="tab1" class="tab-content active">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 学习路线设计 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:road-variant"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    企业学习路线设计
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  将企业内部的技术栈、开发规范和业务需求转化为条理清晰的学习路径。
                </p>

                <div class="mb-4">
                  <h3 class="font-medium text-[#1A1F36] mb-2">
                    前端开发学习路径
                  </h3>
                  <div class="space-y-3">
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段一：基础技能 (4周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        HTML5, CSS3, JavaScript基础
                      </p>
                      <div class="flex flex-wrap mt-2">
                        <span class="skill-tag">HTML5</span>
                        <span class="skill-tag">CSS3</span>
                        <span class="skill-tag">JavaScript</span>
                        <span class="skill-tag">Git基础</span>
                      </div>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段二：框架应用 (6周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        React/Vue框架，状态管理，路由
                      </p>
                      <div class="flex flex-wrap mt-2">
                        <span class="skill-tag">React</span>
                        <span class="skill-tag">Vue.js</span>
                        <span class="skill-tag">Redux</span>
                        <span class="skill-tag">Vuex</span>
                      </div>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段三：工程化 (4周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        Webpack, Git, 单元测试，CI/CD
                      </p>
                      <div class="flex flex-wrap mt-2">
                        <span class="skill-tag">Webpack</span>
                        <span class="skill-tag">单元测试</span>
                        <span class="skill-tag">CI/CD</span>
                        <span class="skill-tag">性能优化</span>
                      </div>
                    </div>
                    <div class="timeline-item">
                      <h4 class="font-medium">阶段四：项目实战 (6周)</h4>
                      <p class="text-sm text-[#4A4F5F]">
                        企业级项目开发，团队协作
                      </p>
                      <div class="flex flex-wrap mt-2">
                        <span class="skill-tag">项目实战</span>
                        <span class="skill-tag">团队协作</span>
                        <span class="skill-tag">代码审查</span>
                      </div>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium"
                >
                  定制学习路径
                </button>
              </div>

              <!-- 技术栈配置 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:application-brackets-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    技术栈配置
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  根据企业实际使用的技术栈配置学习路径中的技术点。
                </p>

                <div class="space-y-4">
                  <div>
                    <h3 class="font-medium text-[#1A1F36] mb-2">前端技术栈</h3>
                    <div class="flex flex-wrap">
                      <span class="skill-tag bg-[#2D5BFF]/10 text-[#2D5BFF]"
                        >React</span
                      >
                      <span class="skill-tag bg-[#2D5BFF]/10 text-[#2D5BFF]"
                        >TypeScript</span
                      >
                      <span class="skill-tag bg-[#2D5BFF]/10 text-[#2D5BFF]"
                        >Ant Design</span
                      >
                      <span class="skill-tag bg-[#2D5BFF]/10 text-[#2D5BFF]"
                        >Webpack</span
                      >
                      <span class="skill-tag bg-[#2D5BFF]/10 text-[#2D5BFF]"
                        >Jest</span
                      >
                    </div>
                  </div>

                  <div>
                    <h3 class="font-medium text-[#1A1F36] mb-2">后端技术栈</h3>
                    <div class="flex flex-wrap">
                      <span class="skill-tag bg-[#00C48C]/10 text-[#00C48C]"
                        >Java</span
                      >
                      <span class="skill-tag bg-[#00C48C]/10 text-[#00C48C]"
                        >Spring Boot</span
                      >
                      <span class="skill-tag bg-[#00C48C]/10 text-[#00C48C]"
                        >MySQL</span
                      >
                      <span class="skill-tag bg-[#00C48C]/10 text-[#00C48C]"
                        >Redis</span
                      >
                    </div>
                  </div>

                  <div>
                    <h3 class="font-medium text-[#1A1F36] mb-2">工具与规范</h3>
                    <div class="flex flex-wrap">
                      <span class="skill-tag bg-[#FF9F00]/10 text-[#FF9F00]"
                        >Git</span
                      >
                      <span class="skill-tag bg-[#FF9F00]/10 text-[#FF9F00]"
                        >Docker</span
                      >
                      <span class="skill-tag bg-[#FF9F00]/10 text-[#FF9F00]"
                        >Jenkins</span
                      >
                      <span class="skill-tag bg-[#FF9F00]/10 text-[#FF9F00]"
                        >代码规范</span
                      >
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  编辑技术栈
                </button>
              </div>
            </div>
          </div>

          <!-- 进度追踪模块 -->
          <div id="tab2" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 学习进度追踪 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:progress-check"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    学习进度追踪
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  实时追踪学员在各学习阶段的进度和掌握情况。
                </p>

                <div class="space-y-4">
                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#E6F7FF] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#2D5BFF] font-bold">张</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">张明</span>
                        <span class="text-sm text-[#4A4F5F]">65%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#00C48C] h-2 rounded-full"
                          style="width: 65%"
                        ></div>
                      </div>
                      <div class="text-xs text-[#8F95A3] mt-1">
                        当前阶段: 框架应用
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#F0F5FF] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#2D5BFF] font-bold">李</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">李思</span>
                        <span class="text-sm text-[#4A4F5F]">42%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#FF9F00] h-2 rounded-full"
                          style="width: 42%"
                        ></div>
                      </div>
                      <div class="text-xs text-[#8F95A3] mt-1">
                        当前阶段: 基础技能
                      </div>
                    </div>
                  </div>

                  <div class="flex items-center">
                    <div
                      class="w-10 h-10 rounded-full bg-[#F6FFED] flex items-center justify-center mr-3"
                    >
                      <span class="text-[#52C41A] font-bold">王</span>
                    </div>
                    <div class="flex-1">
                      <div class="flex justify-between mb-1">
                        <span class="font-medium">王华</span>
                        <span class="text-sm text-[#4A4F5F]">88%</span>
                      </div>
                      <div class="w-full bg-gray-200 rounded-full h-2">
                        <div
                          class="bg-[#52C41A] h-2 rounded-full"
                          style="width: 88%"
                        ></div>
                      </div>
                      <div class="text-xs text-[#8F95A3] mt-1">
                        当前阶段: 项目实战
                      </div>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  查看全部进度
                </button>
              </div>

              <!-- 阶段完成情况 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:chart-box-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    阶段完成情况
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  各学习阶段的完成情况和平均得分。
                </p>

                <div class="space-y-4">
                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">基础技能阶段</span>
                      <span class="text-sm text-[#4A4F5F]">85% 完成率</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 85%"
                      ></div>
                    </div>
                    <div class="text-xs text-[#8F95A3] mt-1">
                      平均得分: 8.7/10
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">框架应用阶段</span>
                      <span class="text-sm text-[#4A4F5F]">72% 完成率</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 72%"
                      ></div>
                    </div>
                    <div class="text-xs text-[#8F95A3] mt-1">
                      平均得分: 8.2/10
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">工程化阶段</span>
                      <span class="text-sm text-[#4A4F5F]">58% 完成率</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 58%"
                      ></div>
                    </div>
                    <div class="text-xs text-[#8F95A3] mt-1">
                      平均得分: 7.8/10
                    </div>
                  </div>

                  <div>
                    <div class="flex justify-between mb-1">
                      <span class="text-sm font-medium">项目实战阶段</span>
                      <span class="text-sm text-[#4A4F5F]">35% 完成率</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                      <div
                        class="bg-[#2D5BFF] h-2 rounded-full"
                        style="width: 35%"
                      ></div>
                    </div>
                    <div class="text-xs text-[#8F95A3] mt-1">
                      平均得分: 8.5/10
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 资源管理模块 -->
          <div id="tab3" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 学习资源库 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:book-open-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    学习资源库
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  为每个学习阶段配置相应的学习材料和资源。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                      <h3 class="font-medium">React官方文档</h3>
                      <span
                        class="text-xs bg-[#2D5BFF] text-white px-2 py-1 rounded"
                        >推荐</span
                      >
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      官方文档，包含基础概念、高级指南和API参考。
                    </p>
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-[#4A4F5F]">阶段: 框架应用</span>
                      <span class="text-sm text-[#4A4F5F]">类型: 文档</span>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                      <h3 class="font-medium">TypeScript实战课程</h3>
                      <span
                        class="text-xs bg-[#00C48C] text-white px-2 py-1 rounded"
                        >视频</span
                      >
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      12小时TypeScript从入门到精通实战课程。
                    </p>
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-[#4A4F5F]">阶段: 基础技能</span>
                      <span class="text-sm text-[#4A4F5F]">时长: 12小时</span>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <div class="flex justify-between items-start mb-2">
                      <h3 class="font-medium">企业代码规范手册</h3>
                      <span
                        class="text-xs bg-[#FF9F00] text-white px-2 py-1 rounded"
                        >内部</span
                      >
                    </div>
                    <p class="text-sm text-[#4A4F5F] mb-3">
                      公司内部前端开发规范、Git提交规范和代码审查标准。
                    </p>
                    <div class="flex justify-between items-center">
                      <span class="text-sm text-[#4A4F5F]">阶段: 工程化</span>
                      <span class="text-sm text-[#4A4F5F]">类型: 规范文档</span>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  添加学习资源
                </button>
              </div>

              <!-- 资源分配管理 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:account-multiple-check"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    资源分配管理
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  为不同学员分配适合的学习资源和学习计划。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <div class="flex items-center mb-3">
                      <div
                        class="w-8 h-8 rounded-full bg-[#E6F7FF] flex items-center justify-center mr-3"
                      >
                        <span class="text-[#2D5BFF] font-bold">张</span>
                      </div>
                      <div>
                        <h3 class="font-medium">张明</h3>
                        <p class="text-sm text-[#4A4F5F]">前端开发路径</p>
                      </div>
                      <span
                        class="ml-auto text-xs bg-[#00C48C] text-white px-2 py-1 rounded"
                        >已分配</span
                      >
                    </div>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• React官方文档</p>
                      <p>• TypeScript实战课程</p>
                      <p>• 企业项目实战案例</p>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <div class="flex items-center mb-3">
                      <div
                        class="w-8 h-8 rounded-full bg-[#F0F5FF] flex items-center justify-center mr-3"
                      >
                        <span class="text-[#2D5BFF] font-bold">李</span>
                      </div>
                      <div>
                        <h3 class="font-medium">李思</h3>
                        <p class="text-sm text-[#4A4F5F]">后端开发路径</p>
                      </div>
                      <span
                        class="ml-auto text-xs bg-[#2D5BFF] text-white px-2 py-1 rounded"
                        >待分配</span
                      >
                    </div>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• Java核心编程</p>
                      <p>• Spring Boot实战</p>
                      <p>• 数据库设计原理</p>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  管理资源分配
                </button>
              </div>
            </div>
          </div>

          <!-- 企业规范模块 -->
          <div id="tab4" class="tab-content hidden">
            <div class="grid grid-cols-2 gap-8 mb-8">
              <!-- 开发规范集成 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:file-document-edit-outline"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    开发规范集成
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  将企业内部的开发规范和最佳实践集成到学习路径中。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <h3 class="font-medium mb-2">代码规范标准</h3>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• ESLint配置与规则</p>
                      <p>• Prettier代码格式化</p>
                      <p>• Git提交消息规范</p>
                      <p>• 代码审查流程</p>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <h3 class="font-medium mb-2">项目开发流程</h3>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• 需求分析文档模板</p>
                      <p>• 技术方案设计规范</p>
                      <p>• 测试用例编写标准</p>
                      <p>• 部署上线流程</p>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full bg-[#2D5BFF] text-white h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  编辑规范文档
                </button>
              </div>

              <!-- 业务需求映射 -->
              <div class="card feature-card">
                <div class="flex items-center mb-4">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-3"
                    data-icon="mdi:chart-tree"
                  ></span>
                  <h2 class="text-xl font-semibold text-[#1A1F36]">
                    业务需求映射
                  </h2>
                </div>
                <p class="text-[#4A4F5F] mb-4">
                  将企业业务需求映射到具体的技术技能和学习内容。
                </p>

                <div class="space-y-4">
                  <div class="p-4 border rounded-lg">
                    <h3 class="font-medium mb-2">电商业务需求</h3>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• 商品管理 → React组件开发</p>
                      <p>• 订单处理 → 状态管理、API设计</p>
                      <p>• 支付集成 → 第三方API调用</p>
                      <p>• 数据分析 → 数据可视化技术</p>
                    </div>
                  </div>

                  <div class="p-4 border rounded-lg">
                    <h3 class="font-medium mb-2">后台管理系统</h3>
                    <div class="text-sm text-[#4A4F5F]">
                      <p>• 权限管理 → JWT、路由守卫</p>
                      <p>• 数据表格 → 组件封装、性能优化</p>
                      <p>• 图表展示 → ECharts集成</p>
                      <p>• 文件上传 → 前端文件处理</p>
                    </div>
                  </div>
                </div>

                <button
                  class="w-full border border-[#2D5BFF] text-[#2D5BFF] h-10 rounded-lg flex items-center justify-center font-medium mt-4"
                >
                  配置业务映射
                </button>
              </div>
            </div>
          </div>

          <!-- 路径模板库 -->
          <div class="card mb-8">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                学习路径模板库
              </h2>
              <div class="flex space-x-4">
                <span class="ai-tag">
                  <span
                    class="iconify mr-1"
                    data-icon="carbon:ai-status-complete"
                  ></span>
                  AI智能推荐
                </span>
                <button class="text-[#2D5BFF] flex items-center">
                  <span class="iconify mr-1" data-icon="mdi:refresh"></span>
                  刷新
                </button>
              </div>
            </div>
            <div class="grid grid-cols-3 gap-6">
              <div
                class="border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
              >
                <div class="flex justify-between items-start mb-3">
                  <h3 class="font-medium text-[#1A1F36]">前端全栈开发</h3>
                  <span
                    class="px-2 py-1 bg-[#00C48C]/10 text-[#00C48C] rounded text-xs"
                    >热门</span
                  >
                </div>
                <div class="text-sm text-[#4A4F5F] mb-4">
                  <p>React + Node.js全栈开发路径，包含前后端完整技术栈。</p>
                </div>
                <div class="flex flex-wrap gap-1 mb-4">
                  <span class="skill-tag">React</span>
                  <span class="skill-tag">Node.js</span>
                  <span class="skill-tag">MySQL</span>
                  <span class="skill-tag">Docker</span>
                </div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>时长: 20周</span>
                  <span>难度: 中级</span>
                </div>
              </div>

              <div
                class="border rounded-lg p-4 hover:shadow-md transition-shadow cursor-pointer"
              >
                <div class="flex justify-between items-start mb-3">
                  <h3 class="font-medium text-[#1A1F36]">Java微服务架构</h3>
                  <span
                    class="px-2 py-1 bg-[#2D5BFF]/10 text-[#2D5BFF] rounded text-xs"
                    >企业级</span
                  >
                </div>
                <div class="text-sm text-[#4A4F5F] mb-4">
                  <p>基于Spring Cloud的微服务架构学习路径，适合后端开发。</p>
                </div>
                <div class="flex flex-wrap gap-1 mb-4">
                  <span class="skill-tag">Java</span>
                  <span class="skill-tag">Spring Cloud</span>
                  <span class="skill-tag">Docker</span>
                  <span class="skill-tag">K8s</span>
                </div>
                <div class="flex justify-between text-sm text-[#8F95A3]">
                  <span>时长: 24周</span>
                  <span>难度: 高级</span>
                </div>
              </div>

              <div
                class="border-2 border-dashed border-[#2D5BFF] rounded-lg p-4 flex flex-col items-center justify-center hover:bg-[#F0F5FF] transition-colors cursor-pointer"
              >
                <div
                  class="w-12 h-12 rounded-full bg-[#2D5BFF]/10 flex items-center justify-center mb-3"
                >
                  <span
                    class="iconify text-2xl text-[#2D5BFF]"
                    data-icon="mdi:plus"
                  ></span>
                </div>
                <h3 class="font-medium text-[#2D5BFF]">创建新模板</h3>
                <p class="text-sm text-[#8F95A3] mt-1">基于企业需求定制</p>
              </div>
            </div>
          </div>

          <!-- 智能推荐 -->
          <div class="card">
            <div class="flex justify-between items-center mb-6">
              <h2 class="text-[20px] font-semibold text-[#1A1F36]">
                AI智能路径推荐
              </h2>
              <span class="ai-tag">
                <span
                  class="iconify mr-1"
                  data-icon="carbon:ai-results-high"
                ></span>
                基于企业需求分析
              </span>
            </div>
            <div class="grid grid-cols-2 gap-6">
              <div class="border rounded-lg p-4">
                <div class="flex items-center mb-3">
                  <span
                    class="iconify text-2xl text-[#2D5BFF] mr-2"
                    data-icon="mdi:lightbulb-on-outline"
                  ></span>
                  <h3 class="font-medium">个性化学习建议</h3>
                </div>
                <p class="text-sm text-[#4A4F5F]">
                  根据学员现有技能水平和学习进度，AI智能推荐最适合的下一个学习阶段和资源。
                </p>
                <div class="mt-3 flex items-center text-sm text-[#2D5BFF]">
                  <span>查看建议</span>
                  <span
                    class="iconify ml-1"
                    data-icon="mdi:chevron-right"
                  ></span>
                </div>
              </div>

              <div class="border rounded-lg p-4">
                <div class="flex items-center mb-3">
                  <span
                    class="iconify text-2xl text-[#00C48C] mr-2"
                    data-icon="mdi:chart-line"
                  ></span>
                  <h3 class="font-medium">学习效果预测</h3>
                </div>
                <p class="text-sm text-[#4A4F5F]">
                  AI算法预测学员完成路径所需时间及最终技能掌握程度，帮助企业制定培养计划。
                </p>
                <div class="mt-3 flex items-center text-sm text-[#00C48C]">
                  <span>查看预测</span>
                  <span
                    class="iconify ml-1"
                    data-icon="mdi:chevron-right"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>

      <!-- 底部状态栏 -->
      <footer
        class="fixed-section bg-[#1A1F36] text-white h-10 flex items-center px-8 text-sm"
      >
        <div class="w-full flex justify-between items-center">
          <div class="flex items-center space-x-6">
            <div class="flex items-center">
              <span class="w-2 h-2 rounded-full bg-[#00C48C] mr-2"></span>
              <span>系统在线</span>
            </div>
            <div class="flex items-center">
              <span
                class="iconify text-green-400 mr-2"
                data-icon="mdi:sync"
              ></span>
              <span>数据同步中 (92%)</span>
            </div>
            <div>
              <span class="text-[#8F95A3]">DeepSeek-R1模型 | 学习路径优化</span>
            </div>
          </div>
          <div>© 2025 AI Talent Pro 企业版 | 深度求索技术提供</div>
        </div>
      </footer>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 标签切换功能
        const tabButtons = document.querySelectorAll(".tab-button");
        const tabContents = document.querySelectorAll(".tab-content");

        tabButtons.forEach((button) => {
          button.addEventListener("click", () => {
            const tabId = button.getAttribute("data-tab");

            // 移除所有活动状态
            tabButtons.forEach((btn) => btn.classList.remove("active"));
            tabContents.forEach((content) =>
              content.classList.remove("active")
            );

            // 添加当前活动状态
            button.classList.add("active");
            document.getElementById(tabId).classList.add("active");
          });
        });

        // 模拟数据加载
        setTimeout(() => {
          // 模拟加载完成
          console.log("学习路径数据加载完成");
        }, 1000);
      });
    </script>
  </body>
</html>
